<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            min-height: 100vh;
            background-color: #abefe9;
        }

        body>div {
            margin: 5px auto;
            border: #bfa 3px solid;
            background-color: #FFCCCC;
        }

        hr {
            background-color: red;
            height: 1px;
            border: 0;
        }

        .d1 {
            width: 300px;
            height: 200px;
            /* 如果背景图片小于元素，则会自动重复铺满元素 */
            background-image: url("./static/plant2.png")
        }

        .d2 {
            width: 150px;
            height: 90px;
            /* 如果背景图片大于元素，则会隐藏溢出的部分 */
            background-image: url("./static/plant2.png")
        }

        .d3 {
            width: 300px;
            height: 200px;
            background-image: url("./static/plant2.png");
            /* 设置背景图片的重复
                repeat:默认，X-Y轴重复
                no-repeat:不重复
                repeat-x/y:x/y轴重复
          */
            background-repeat: no-repeat;
        }

        .d4 {
            width: 300px;
            height: 200px;
            background-image: url("./static/plant2.png");
            background-repeat: no-repeat;
            /* 设置背景图片位置
                top bottom left right center
                九宫格，设置两个值 
                或者设置水平和垂直方向的偏移量       
                */
            background-position: center right;
        }

        .d5 {
            width: 200px;
            height: 150px;
            padding: 20px;
            border: 10px black double;
            background-image: url("./static/plant2.png");
            background-repeat: no-repeat;
            /* background-clip对背景进行裁剪
                border-box:默认值
                padding-box:背景只会出现在内容区和内边距
                content-box:背景只出现在内容区
             */
            background-clip: content-box;
            /* 
                背景图片起始原点
                padding-box:默认值,背景图片从内边距开始
                border-box:并经图片从边框开始
                content-box:背景图片从内容区开始
             */
            background-origin: border-box;
        }

        .d6 {
            overflow: hidden;
        }

        .d6>div {
            float: left;
            border: 1px black solid;
            margin: 0 5px;
            width: 80px;
            height: 100px;
            background-repeat: no-repeat;
            background-image: url("./static/plant2.png");
        }

        .d61 {
            /* 默认值，原有大小 */
            background-size: auto;
        }

        .d62 {
            /* 可直接设置背景图片大小
                一个值设置auto，会保持原本图片比例根据领一个值自适应
             */
            background-size: 100% auto;
        }

        .d63 {
            /* 图片比例不变，将元素铺满 */
            background-size: over;
        }

        .d64 {
            /* 图片比例不变，将元素完整显示 */
            background-size: contain;
        }

        .d7 {
            width: 300px;
            height: 250px;
            background-repeat: no-repeat;
            background-image: url("./static/plant2.png");
            overflow: auto;
        }

        .d7>div {
            height: 500px;
            margin-top: 10px;
            background-color: rgba(255, 255, 255, .5);
            background-image: url("./static/plant.png");
            background-repeat: no-repeat;
            background-position: top center;
            /* 为啥不管用？？？ */
            background-attachment: fixed;
        }

        /* 以上背景样式可通过background一次性设置 */
    </style>
</head>

<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
    <div class="d4"></div>
    <div class="d5"></div>
    <div class="d6">
        <div class="d61"></div>
        <div class="d62"></div>
        <div class="d63"></div>
        <div class="d64"></div>
    </div>
    <div class="d7">
        <div>貌似不管用</div>
    </div>
    <div style="height: 100px;visibility: hidden;"></div>
</body>

</html>